<template>
    <div class="welcome-header">
         <h2>欢迎登录课工场新闻管理系统</h2>
         <h2 class="welcome-subtitle">今天是 {{ currentDate }}，祝您工作愉快！</h2>
       </div>
 </template>
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 
 // 使用ref定义响应式数据
 const currentDate = ref('');
 let timer = null;
 
 // 格式化日期时间函数
 const formatDateTime = (date) => {
   return date.toLocaleString('zh-CN', {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
     hour: '2-digit',
     minute: '2-digit',
     second: '2-digit',
     hour12: false
   });
 };
 
 // 组件挂载后初始化时间并启动定时器
 onMounted(() => {
   // 立即设置一次当前时间
   currentDate.value = formatDateTime(new Date());
   
   // 每秒更新一次时间
   timer = setInterval(() => {
     currentDate.value = formatDateTime(new Date());
   }, 1000);
 });
 
 // 组件卸载前清除定时器
 onUnmounted(() => {
   if (timer) {
     clearInterval(timer);
   }
 });
 </script>
 
 <style scoped>
 .welcome-header {
     background-color: white;
     padding: 2rem;
     border-radius: 8px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
     margin-bottom: 1rem;
     text-align: center;
   }
   
   .welcome-header h2 {
     color: #1890ff;
     margin-bottom: 1rem;
     font-size: 1.8rem;
   }
   
   .welcome-subtitle {
     font-size: 1.5rem;
     color: #333;
   }
 </style>
     